// Global Static/Constants =================================================================
var Static =
{
    WorkspaceW: 640,
    WorkspaceH: 480
};

// Global Variables
var Global =
{
    Counter: {},
    CurrentSelected: null,

    RibbonCV: null,
    SlidesCV: null,
    AddSlideCV: null,
    WorkspaceCV: null,

    SlideManager: null,
    SlideMap: {}
};

// Loading functions ========================================================================
function loadCanvases()
{
    // Get runtime sizes
    var ribbonStyle = window.getComputedStyle(document.getElementById('ribbon'));
    var slidesStyle = window.getComputedStyle(document.getElementById('slides'));
    var addSlideStyle = window.getComputedStyle(document.getElementById('addSlide'));

    // Create canvases
    Global.RibbonCV = new MyCanvas('ribbon', parseInt(ribbonStyle.width), parseInt(ribbonStyle.height));
    Global.SlidesCV = new MyCanvas('slides', parseInt(slidesStyle.width), parseInt(slidesStyle.height));
    Global.AddSlideCV = new MyCanvas('addSlide', parseInt(addSlideStyle.width), parseInt(addSlideStyle.height));
    Global.WorkspaceCV = new MyCanvas('workspace', Static.WorkspaceW, Static.WorkspaceH);
}

function loadUIButtons()
{
    // Buttons
    var btnAddText = new UIButton("button-add-text", { draggable: false, resizable: false });
    var btnAddImage = new UIButton("button-add-image", { draggable: false, resizable: false });
    var btnAddSharp = new UIButton("button-add-sharp", { draggable: false, resizable: false });
    var btnAddTable = new UIButton("button-add-table", { draggable: false, resizable: false });
    var btnAddChart = new UIButton("button-add-chart", { draggable: false, resizable: false });

    var btnAddSlide = new UIButton("button-add-slide", { draggable: false, resizable: false });

    // Specs
    btnAddText.SetProperty("Source", 'Images/UI/btn-add-text.png');
    btnAddText.SetProperty("Position", { x: 5, y: 5 });
    btnAddText.SetProperty("Size", { width: 30, height: 30 });
    btnAddText.SetProperty("Centroid", { x: 0, y: 0});

    btnAddImage.SetProperty("Source", 'Images/UI/btn-add-image.png');
    btnAddImage.SetProperty("Position", { x: 40, y: 5 });
    btnAddImage.SetProperty("Size", { width: 30, height: 30 });
    btnAddImage.SetProperty("Centroid", { x: 0, y: 0 });

    btnAddSharp.SetProperty("Source", 'Images/UI/btn-add-sharp.png');
    btnAddSharp.SetProperty("Position", { x: 75, y: 5 });
    btnAddSharp.SetProperty("Size", { width: 30, height: 30 });
    btnAddSharp.SetProperty("Centroid", { x: 0, y: 0 });

    btnAddTable.SetProperty("Source", 'Images/UI/btn-add-table.png');
    btnAddTable.SetProperty("Position", { x: 110, y: 5 });
    btnAddTable.SetProperty("Size", { width: 30, height: 30 });
    btnAddTable.SetProperty("Centroid", { x: 0, y: 0 });

    btnAddChart.SetProperty("Source", 'Images/UI/btn-add-chart.png');
    btnAddChart.SetProperty("Position", { x: 145, y: 5 });
    btnAddChart.SetProperty("Size", { width: 30, height: 30 });
    btnAddChart.SetProperty("Centroid", { x: 0, y: 0 });


    btnAddSlide.SetProperty("Source", 'Images/UI/btn-add-slide.png');
    btnAddSlide.SetProperty("Position", { x: 88, y: 9 });
    btnAddSlide.SetProperty("Size", { width: 20, height: 20 });
    btnAddSlide.SetProperty("Centroid", { x: 0, y: 0 });

    // Add event for button
    btnAddText.AddEventHandler("click", 0, addText);
    btnAddImage.AddEventHandler("click", 0, addImage);

    btnAddSlide.AddEventHandler("click", 0, addSlide);

    // Add to toolbox
    Global.RibbonCV.AddControl(btnAddText);
    Global.RibbonCV.AddControl(btnAddImage);
    Global.RibbonCV.AddControl(btnAddSharp);
    Global.RibbonCV.AddControl(btnAddTable);
    Global.RibbonCV.AddControl(btnAddChart);

    Global.AddSlideCV.AddControl(btnAddSlide);
}

function loadPage()
{
	// Load canvas
    loadCanvases();

    // Load UI buttons
    loadUIButtons();

	// Create object for manage the slides
	Global.SlideManager = new SlideManager(Global.WorkspaceCV);
}

function addText()
{
    var controlType = "text";
    if (Global.Counter[controlType] === undefined)
        Global.Counter[controlType] = 0;

    var controlId = controlType + Global.Counter[controlType]++;
    var obj = new UILabel(controlId);
    obj.SetProperty("Position", { x: 10, y: 10 });

    //Global.SlideManager.AddContentToSlide(obj);
    Global.WorkspaceCV.AddControl(obj);
}

function addImage()
{
    var controlType = "image";
    if (Global.Counter[controlType] === undefined)
        Global.Counter[controlType] = 0;

    var controlId = controlType + Global.Counter[controlType]++;
    var obj = new UIImage(controlId);
    obj.SetProperty("Position", { x: 10, y: 10 });
    //var size = obj.GetProperty("Size");
    //obj.SetProperty("Position", { x: size.width / 2 + 10, y: size.height / 2 + 10 });

    //Global.SlideManager.AddContentToSlide(obj);
    Global.WorkspaceCV.AddControl(obj);
}

function addSlide()
{
    var slide = addSlideControl();
    var prev = addSlidePreview();

    Global.SlideManager.AddSlide(slide);
    Global.SlidesCV.AddControl(prev);

    Global.SlideMap[prev.GetProperty("ID")] = slide;

    prev.AddAnimation("zoomout", createZoomOut(prev));
    prev.AddAnimation("zoomin", createZoomIn(prev));

    prev.AddEventHandler("click", 0, function (that, evt) {
        Global.SlideManager.ShowSlide(Global.SlideMap[that.GetProperty("ID")]);
    });

    prev.AddEventHandler("mouseenter", 0, function(that, evt) {
        that.PlayAnimation("zoomout");
    });

    prev.AddEventHandler("mouseleave", 0, function (that, evt) {
        that.PlayAnimation("zoomin");
    });
}

function addSlideControl()
{
    var controlType = "slide";
    if (Global.Counter[controlType] === undefined)
        Global.Counter[controlType] = 0;

    var controlId = controlType + Global.Counter[controlType]++;
    var obj = new UISlide(controlId, { draggable: false, resizable: false });
    obj.SetProperty("Position", { x: 0, y: 0 });

    return obj;
}

function addSlidePreview()
{
    var controlType = "slidePreview";
    if (Global.Counter[controlType] === undefined)
        Global.Counter[controlType] = 0;

    var controlId = controlType + Global.Counter[controlType]++;
    var obj = new UISlidePreview(controlId, { draggable: false, resizable: false });
    var total = Global.SlideManager.Count;

    var size = obj.GetProperty("Size");
    obj.SetProperty("Position", { x: 18 + size.width / 2, y: 18 + size.height / 2 + (18 + size.height) * total });
    obj.SetProperty("Centroid", { x: size.width / 2, y: size.height / 2 });

    return obj;
}

function createZoomIn(obj)
{
    var animation = new AnimationWrapper(
    {
        node: obj.getNode(),
        duration: 200,
        delay: 0,
        loop: false
    });

    animation.createAnimation("ZoomIn", { layer: obj.GetControl().getLayer(), scaleX: 1, scaleY: 1 });
    return animation;
}

function createZoomOut(obj)
{
    var animation = new AnimationWrapper(
    {
        node: obj.getNode(),
        duration: 200,
        delay: 0,
        loop: false
    });

    animation.createAnimation("ZoomOut", { layer: obj.GetControl().getLayer(), scaleX: 1.1, scaleY: 1.1 })
    return animation;
}
